<template>
  <div class="outsides">
    <!-- 新增页 -->
    <div class="header">
      <h1>基础信息</h1>
    </div>
    <div class="outside">
      <div class="left">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="供应商名称" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入供应商名称"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="法人" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入法人"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <div class="block" style="margin-bottom: 20px; margin-left: 50px">
            <span class="demonstration">地址：</span>
            <el-cascader
              placeholder="试试搜索：指南"
              :options="options"
              filterable
            ></el-cascader>
          </div>

          <el-form-item label="详细地址" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入详细地址"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入联系人"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="130px"
        >
          <el-form-item label="供应商类型" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入供应供应商类型"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="合作关系等级" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入合作关系等级"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="社会信用代码" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入详细地址"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="field107">
            <el-input
              v-model="formData.field107"
              placeholder="请输入联系电话"
              clearable
              :style="{ width: '50%' }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
     
    </div>
     <div class="footer">
        <el-form>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],

      formData: {
        field107: undefined,
      },
      rules: {
        field107: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style>
.outsides {
  margin-left: 17px;
}
.header {
  margin-top: 30px;
  margin-left: 30px;
}

.outside {
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.left {
  width: 44%;
  margin-left: 100px;
  line-height: 100px;
}
.right {
  width: 44%;
}
.footer{
    margin-top: 100px;
    text-align: center;
}
</style>
